<template>

  <div class="login-box">
  <!-- <div>
      <el-dialog :width="mdDialogwidth" :title="title" :visible.sync="dialogVisible" append-to-boby>
        <div class="details-container">
        <div>
        </el-dialog>
        <el-dialog :width="mdDialogwidth" :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false">
        </el-dialog>
        <el-dialog :width="mdDialogwidth" :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false">
        </el-dialog>
  <div> -->
      <!-- <div class="img1"></div> -->
      <!-- <img src="../assets/Login.jpg" width="100%" height="100%" /> -->

        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
       
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <h3 class="login-title">欢迎登录</h3>

        <el-form-item align="center">

        <el-form-item label="用户名" prop="Taccount" label-width="100px" style="width: 320px" align="center">
          <el-input v-model="form.Taccount"  placeholder="请输入用户名" ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="Tpwd" label-width="100px" style="width: 320px" align="center">
          <el-input type="Tpwd" v-model="form.Tpwd" placeholder="请输入密码"></el-input>
        </el-form-item>
       
        <!-- <el-form-item align="center"> -->
        <!-- <el-button type="primary" @click="onSubmit('form')">教师登录</el-button> -->
        <!-- </el-form-item> -->
      
        
        <span style="font-size:18px;"><body>
        <el-button type="primary" @click="tonSubmit('form')">教师登录</el-button>
        <el-button type="primary" @click="aonSubmit('form')">管理员登录</el-button>
        <el-button type="primary" @click="ronSubmit()">注册</el-button>
        </body></span>
       </el-form-item>
       
    </el-form>
  </div>
</template>

<script>
import { setGlobalData } from "utils/globalData";
export default {
  name: "Login",

  data() {
    return {
      form: {
        Taccount: "",
        Tpwd: "",
      },
   
      rules: {
        Taccount: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],

        Tpwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
     this.getClassroomList();
  },
  methods: {
    //教师登录
    tonSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        //axios内部的then内的this是当前axios对象，而不是当前的vue对象.这样this不会冲突
        var vm = this;

        if (valid) {
          // alert('submit!');
          // 设置用户名
          setGlobalData("Taccount",this.form.Taccount);
          console.log('连接后端')
         this.axios({
        method: "get",
        url: "/api/tlogin/",
         data: {
             Taccount: this.form.Taccount,
           Tpwd: this.form.Tpwd,
            },
      }).then(function (response) {
            //response是返回值
            // eslint-disable-next-line no-console

            console.log(response);
            // eslint-disable-next-line no-console
            console.log("返回成功");
            // if(response.data.succ='success'){
            //   //登陆成功
            // eslint-disable-next-line no-console
            console.log(response.data);
           if (response.data.code == 1001) {
              
            vm.$router.push("/THome");
           } else {
            vm.$message.error(response.data.message);
           }
            
            // }
           });
          
        }

        else {
          vm.$message.error("用户名或密码格式不正确");
          return false;
        }
      });
    },

    //管理员登录
     aonSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        //axios内部的then内的this是当前axios对象，而不是当前的vue对象.这样this不会冲突
        var vm = this;

        if (valid) {
          // alert('submit!');
          // 设置用户名
              setGlobalData("Taccount", this.form.Taccount);
//传入后端
          this.axios({
            method: "get",
            url: "/api/",
            data: {
             Taccount: this.form.Taccount,
           Tpwd: this.form.Tpwd,
            },
          }).then(function (response) {
            //response是返回值
            // eslint-disable-next-line no-console
            console.log(response);
            // eslint-disable-next-line no-console
            console.log("返回成功");
            // if(response.data.succ='success'){
            //   //登陆成功
            // eslint-disable-next-line no-console
            console.log(response.data);
            if (response.data.code == 1001) {
              
              vm.$router.push("/AHome");
            } else {
              vm.$message.error(response.data.message);
            }

            // }
          });
        } else {
          vm.$message.error("用户名或密码格式不正确");
          return false;
        }
      });
    },
  

    //注册
    ronSubmit(formName) {
      //跳转到注册页面
      this.$router.push("/register");
    },
  },
};
</script>



<style scoped>
/* .img1{
      background-size: 100% 100%;
      background: url("../../assets/Login.jpg") center center no-repeat;
      height: 100%;
      position: fixed;
      width: 100%
  } */
.login-box {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background: url("../assets/Login.jpg") center center no-repeat;
  position: fixed;

  border: 1px solid #DCDFE6;
  /* margin: 150px auto;
    padding: 20px 50px 20px 30px; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px #DCDFE6;
}

.login-title {
        text-align: center;
        margin: 0 auto 40px auto;
        color: #b30c0c;
        font-size: 30px;
        font-weight: bold;
    }

</style>